<template>
  <div class="taskbar-item" :title="title" @click="props.callback">
    <div
      class="icon"
      :style="{ background: `url(${icon})` }"
      :src="icon"
      :alt="title"
      @click="open"
    >
      <ant-close-circle-filled class="close" @click="close" />
    </div>
    <p class="title">{{ title }}</p>
  </div>
</template>

<script setup lang="ts">
import { provide, inject, defineEmits, ref } from "vue";
const props = defineProps({
  id: null,
  title: String,
  icon: String,
  callback: Function,
});

const state = ref({
  isOpen: false,
});

console.log(props.callback);

function open(e: Event) {
  emit("open", e, {
    isOpen: state.value.isOpen,
    id: props.id,
  });
}

function close(e: Event) {
  emit("close", e, props.id);
}

// const menuItems = ref([
//   { text: "菜单项1", action: () => console.log("点击了菜单项1") },
//   { text: "菜单项2", action: () => console.log("点击了菜单项2") },
//   { text: "菜单项3", action: () => console.log("点击了菜单项3") },
// ]);

const emit = defineEmits(["open", "close"]);
</script>

<style scoped lang="less">
.taskbar-item {
  // position: relative;
  // pointer-events: none;
  float: left;
  cursor: pointer;
  opacity: 1 !important;
  margin: 0 5px;
  width: 100%;
  height: 100%;
  transition: all 0.1s ease-in-out;

  &:hover {
    transform: translateY(-0.625rem) scale(1.2);
    margin: 0 1rem;

    .title {
      color: #000;
      font-size: 0.5rem;
    }
  }

  .icon {
    position: relative;
    width: 2rem;
    height: 2rem;
    background-size: cover !important;
    .close {
      position: absolute;
      top: 0px;
      right: 0px;
      color: rgba(0, 0, 0, 0.5);
      box-shadow: var(--box-shadow-light);

      &:hover {
        color: #fff;
      }
    }
  }

  .title {
    text-align: center;
    font-size: 0.3rem;
    color: #666;
    font-family: Microsoft Sans Serif;
  }
  // img {
  //   width: 2rem;
  //   height: 2rem;
  // }
}
</style>
